<template>
    <div class="login_container">
        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="auto" class="login_form">
            <div class="title_container">
                <div class="title">
                    <img src="../assets/img.png" alt="">
                </div>
            </div>
            <el-form-item label="" prop="username">
                <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="submitButton" type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
import axios from "axios";

export default {
    name: 'Login',
    components: {},
    data() {
        return {
            loginForm: {
                username: '',
                password: '',
            },
            msg: '111',
            rules: {
                username:
                        [
                            {required: true, message: '请输入用户名', trigger: 'blur'},
                            {min: 2, max: 10, message: '长度在 2 到 10 个字符之间', trigger: 'blur'}
                        ],
                password:
                        [
                            {required: true, message: '请输入密码', trigger: 'blur'},
                            {min: 4, max: 15, message: '长度在 4 到 15 个字符之间', trigger: 'blur'}
                        ]
            },
        };
    },
    methods: {
        submitForm(loginForm) {
            var logonValid;
            this.$refs.loginForm.validate((valid) => {
                logonValid = valid;
                if (!logonValid) {
                    this.$message({
                        message: '请按要求输入用户名和密码',
                        type: 'warning'
                    });
                }
            })
            if (!logonValid) {
                return;
            }
            let username = this.loginForm.username
            let password = this.loginForm.password
            axios.get('http://localhost:8888/user/login/' + username + '/' + password).then((response) => {
                console.log(response.data.status);
                console.log(response.data.msg);

                this.msg = response.data.message;
                console.log(this.msg);
                if (response.data.status == "500") {
                    this.$message.error(this.msg);
                    this.data.username = "";
                    this.data.password = "";
                } else if (response.data.status == "200") {
                    this.$message({
                        message: this.msg,
                        type: 'success'
                    });
                    window.localStorage.setItem("token", "11");
                    this.$router.push("/home/pharmacy/manage");
                } else {
                    this.$message({
                        message: '登录出错，请联系管理员！',
                        type: 'warning'
                    });
                }
            })
        },
    }

}
</script>

<style scoped>


.login_container {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: url("../assets/back.webp") no-repeat;
    background-size: auto;
    /*background-size: cover;*/
}

.login_form {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 450px;
    height: 400px;
    padding-left: 34px;
    padding-right: 34px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px;
}

.title_container {
    position: relative;
    margin-top: 35px;
    margin-bottom: 35px;
}

.title {
    font-size: 26px;
    color: #999;
    margin: 0 auto 0 auto;
    text-align: center;
    font-weight: 700;
}

.title_container img {
    width: 100px;
    height: 50px;
}


el-form-item {
    border: 1px solid #cdcdcd;
    background: #fff;
    border-radius: 5px;
    color: #000;
    margin-bottom: 22px;
    line-height: 50px;
    position: relative;
    font-size: 14px;
}

el-input {
    display: inline-block;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 12px 5px 12px 15px;
    color: #999;
    caret-color: #fff;
    -webkit-appearance: none;
    height: 70px;
}

.submitButton {
    width: 100%;
    height: 50px;
}

.el-input__inner,
.el-form-item__content {
    height: 50px !important;
}

.el-button--primary {
    background-color: #5584FF !important;
    border: none !important;
}
</style>
